<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
    <link rel="stylesheet" href="index.css">
    <title>垂直双滚动面板</title>
</head>

<body>
    <div class="slider-container">
        <div class="left-slide">
            <div style="background-color: #FD3555;">
                <h1>Nature flower</h1>
                <p>all in pink</p>
            </div>
            <div style="background-color: #2A86BA;">
                <h1>Bluuue Sky</h1>
                <p>with it's mountains</p>
            </div>
            <div style="background-color: #252E33;">
                <h1>Lonely Castle</h1>
                <p>in the wilderness</p>
            </div>
            <div style="background-color: #FFB886;">
                <h1>Flying eagle</h1>
                <p>in the sunset</p>
            </div>
        </div>

        <div class="right-slide">
            <div
                style="background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80')">
            </div>
            <div
                style="background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80')">
            </div>
            <div
                style="background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80')">
            </div>
            <div
                style="background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80')">
            </div>
        </div>

        <div class="action-buttons">
            <button class="down-button">
                <i class="fas fa-arrow-down"></i>
            </button>
            <button class="up-button">
                <i class="fas fa-arrow-up"></i>
            </button>
        </div>
    </div>

    <script src="index.js"></script>
</body>

</html>